<template>
  <div>
    <SearchForm :onSearch="onSearch" :onReset="onReset" />
    <div class="chart-wrapper">
      <BasicChart :chartOption="chartOption"/>
    </div>
  </div>
</template>

<script>
import SearchForm from "./searchForm";
import BasicChart from "@/components/echarts/basicChart";
import api from "@/api/commonApi";
export default {
  components: {
    SearchForm,
    BasicChart
  },
  data() {
    return {
      chartOption: {
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data: ['收缩压（高压）', '舒张压（低压）'],
            itemGap: 5
        },
        grid: {
            top: '12%',
            left: '5%',
            right: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type : 'category',
                data : []
            }
        ],
        yAxis: [
            {
                type : 'value',
                name : '单位：mmHg'
            }
        ],
        dataZoom: [
            {
                type: 'slider'
            }
        ],
        series: [
            {
                name: '收缩压（高压）',
                type: 'line',
                itemStyle: {
                    color: 'rgb(222, 53, 62)'  
                },
                data: []
            },
            {
                name: '舒张压（低压）',
                type: 'line',
                itemStyle: {
                    color: 'rgb(175, 195, 72)'
                },
                data: []
            },
            {
                type: 'line',
                
                markLine: {
                    silent: true,
                    symbol: 'none',
                    lineStyle: {
                        color: 'rgb(175, 195, 72)'  
                    },
                    label: {
                        formatter: (params) => {
                        return '舒张压基准线'
                        }
                    },
                    data: [{
                        yAxis: 80
                    }]
                },
            },
            {
                type: 'line',
                markLine: {
                    silent: true,
                    symbol: 'none',
                    lineStyle: {
                        color: 'rgb(222, 53, 62)'
                    },
                    label: {
                        formatter: (params) => {
                        return '收缩压基准线'
                        }
                    },
                    data: [{
                        yAxis: 120
                    }]
                },
            }
        ]
      }
    }
  },
  mounted() {
    this.patientPressureList();
  },
  methods: {
    onSearch(values) {
      this.patientPressureList({...values});
    },
    onReset() {
      this.patientPressureList();
    },
    patientPressureList({ fromTime, endTime } = { }) {
      const reqBody = {
        pageNo: 1,
        pageSize: 31,
        params: {
          memberId: this.$route.params.id
        }
      };
      fromTime && (reqBody.params.measuringTime_GOE = moment(fromTime).format('YYYY-MM-DD'));
      endTime && (reqBody.params.measuringTime_LT = moment(endTime).format('YYYY-MM-DD'));
      this.$axios.post(api.patientPressureList, reqBody).then(res => {
        if (res.data.code === 1) {
          const list = res.data.object;
          list.reverse();
          this.chartOption.xAxis[0].data = list.map(item => item.measuringTime.slice(0, 10));
          this.chartOption.series[0].data = list.map(item => item.sbp);
          this.chartOption.series[1].data = list.map(item => item.dbp);
        } else {
          this.$Message.info(res.data.message);
        }
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped lang="less">
.chart-wrapper {
  height: 400px;
  // width: 800px;
}
</style>